<template>
  <ConTent>
    <div class="row justify-content-md-center">
      <div class="col-3">
        <form @submit.prevent="register">
          <div class="mb-3">
            <label for="exampleFormControlInput4" class="form-label">店铺名称</label>
            <input v-model="shopname" type="text" class="form-control" id="exampleFormControlInput4" placeholder="店铺名称">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput5" class="form-label">店铺地址</label>
            <input v-model="shopaddress" type="text" class="form-control" id="exampleFormControlInput5"
              placeholder="店铺地址">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlInput6" class="form-label">电话</label>
            <input v-model="shopphone" type="text" class="form-control" id="exampleFormControlInput6" placeholder="电话">
          </div>
          <div style="color:red;">{{ error_message }}</div>
          <button type="submit" class="btn btn-primary">注册</button>
        </form>
      </div>
    </div>
  </ConTent>
</template>

<script>
import ConTent from '@/components/ConTent.vue';
import { ref } from 'vue';
import { useStore } from 'vuex';
import router from '@/router/index';
import $ from 'jquery';
export default {
  components: {
    ConTent,
  },
  setup() {
    let shopname = ref("");
    let shopaddress = ref("");
    let shopphone = ref("");
    let error_message = ref("");
    let store = useStore();
    const register = () => {
      error_message.value = "";
      $.ajax({
        url: "http://8.134.248.229:10085/register/shop/",
        type: "post",
        data: {
          shopname: shopname.value,
          shopphone: shopphone.value,
          shopaddress: shopaddress.value,
        },
        headers: { Authorization: "Bearer " + store.state.token, },
        success(resp) {
          if (resp.error_message === "success") {
            router.push({ name: "home" });
          }
          else {
            error_message.value = resp.error_message;
          }
        },
      })
    }
    return { shopname, shopphone, shopaddress, register, error_message };
  }
}
</script>

<style scoped>
button {
  width: 100%;
}
</style>